<template>
	<view class="rankList">
		<view class="container">
			<div class="rank-list">
				<ul>
					<li>
						<view class="header">
							<div class="title">{{rankList[0].title}}</div>
							<div class="icon"></div>

						</view>
						<u-empty mode="data" v-if="isShow" icon="https://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
						<div class="banner">
							<div class="rank-con" v-for="(item,index) in freeList" @click="addJumpDetail(item)">
								<div class="num">.</div>
								<div class="rank-detail">
									<view class="list-img">
										<image :src="item.cover" mode=""></image>
									</view>
									<div class="list-text">
										<div class="list-name">
											<p>{{item.title}}</p>
										</div>
										<div class="list-author">
											<text>{{item.author}}</text>
											<div class="box">{{item.category}}</div>
										</div>
										<div class="list-detail">
											<text v-html="item.description"></text>
										</div>
									</div>
								</div>
								<div class="rank-txt">
									<text>{{item.title}}</text>
								</div>
							</div>


						</div>
					</li>
				</ul>
			</div>

		</view>
	</view>
</template>

<script>
	import {
		getFree
	} from '@/api/index.js';
	export default {
		data() {
			return {
				rankList: [{
					sex: 'male',
					type: 'day',
					title: '男生限时免费'
				}, {
					sex: 'female',
					type: 'day',
					title: '女生排行榜'
				}],
				rankpublic: [],
				ranklist: [],
				freeList: [],
				isShow: false
			}
		},
		onLoad() {
			uni.showLoading({
				title: '正在加载中...'
			})
			getFree(this.rankList[0].sex).then(content => {
					console.log(content);
					let {
						code,
						data: {
							books
						}
					} = content;
					this.freeList = books;
					if(books.length == 0){
						this.isShow = true;
					}else{
						this.isShow = false;
					}
					uni.hideLoading()
				})
				.catch(error => {
					console.log(error);
				})
		},
		methods: {
			addJumpRank(index) {
				if (index == 0) {
					let rankSex = JSON.stringify(this.rankList[0].sex)
					uni.navigateTo({
						url: '../ranking/ranking?sex=' + rankSex
					})
				} else if (index == 1) {
					let rankSex = JSON.stringify(this.rankList[1].sex)
					uni.navigateTo({
						url: '../ranking/ranking?sex=' + rankSex
					})
				}
			},
			addJumpPublic() {
				uni.navigateTo({
					url: '../publish/publish'
				})
			},
			addJumpDetail(item) {
				console.log(item);
				this.book_id = item.sourceUrl.slice(8);
				console.log(this.book_id);
				this.category = item.category;
				this.description = item.description
				let data = {
					'id': this.book_id,
					'category': this.category,
					'description': this.description
				}
				uni.navigateTo({
					url: '../detail/detail?data=' + encodeURIComponent(JSON.stringify((data)))
				})
			}
		}
	}
</script>

<style lang="scss">
	.rankList {
		background-image: url("../../static/background-image.png");
		left: -10px;
		top: 0px;
		height: 2000rpx;
		width: 100%;
		opacity: 1;

		.container {
			width: 100%;
			height: 100%;

			.rank-list {
				width: 100%;
				height: 100%;
				overflow: hidden;

				ul {
					margin-top: 40rpx;
					padding: 0;
					list-style: none;
					overflow: hidden;

					li {
						width: 100%;
						margin: 10rpx auto 80rpx;
						overflow: hidden;

						.header {
							width: 90%;
							margin: 0 auto;
							position: relative;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.icon {
								position: absolute;
								left: 0px;
								top: 8px;
								width: 24px;
								height: 12px;
								opacity: 1;
								border-radius: 6px 0px, 5px, 0px;
								background: linear-gradient(90deg, rgba(255, 60, 0, 1) 0%, rgba(204, 204, 204, 0) 100%);
							}

							.title {
								font-size: 18px;
								color: rgba(59, 59, 59, 1);
								font-weight: 600;
							}

							.more {
								width: 80rpx;
								height: 40rpx;
								background-color: #fce2b2;
								font-size: 10px;
								// font-weight: 600;
								line-height: 40rpx;
								border-radius: 20rpx;
								color: rgba(119, 130, 138, 1);
								text-align: center;
								border: 1px solid #fd6143;

							}
						}

						.u-empty {
							margin-top: 80rpx !important;
							width: 100%;
							height: 2000rpx;
							background-color: #fff;
							justify-content: flex-start;
						}

						.banner {
							width: 100%;
							background-color: #fceccc;
							overflow: hidden;
							margin-top: 40rpx;

							.rank-con {
								position: relative;
								display: flex;
								width: 90%;
								height: 240rpx;
								margin: 38rpx auto;
								// background-color: #fceccc;

								&.active {
									position: relative;
									display: flex;
									margin-top: 30rpx;
									width: 92%;
									// background-color: skyblue;
									height: 40rpx;
								}

								.num {
									background: url(https://m.yuedu.163.com/assets/mobile/images/index18/icon_free@2x.png?a6822ded) 0 0 no-repeat;
									position: absolute;
									top: -2px;
									display: block;
									width: 40px;
									height: 18px;
									background-size: contain;
									color: #fff;
									text-indent: 4px;
									left: 0px;
									font-size: 12px;
									z-index: 100;

									&.active {
										background: url(https://easyreadfs.nosdn.127.net/web/trunk/1476860251636/top1.png) 0 0 no-repeat;
										position: absolute;
										top: 3px;
										display: block;
										width: 18px;
										height: 17px;
										background-size: contain;
										color: #fff;
										text-indent: 4px;
										left: 8px;
										font-size: 12px;
										z-index: 100;
									}
								}

								.rank-detail {
									display: flex;
									width: 100%;
									height: 100%;

									.list-img {
										width: 480rpx;
										height: 100%;

										image {
											width: 180rpx;
											height: 100%;
											border-radius: 20rpx;
											border: 1px solid #fd6143;

										}
									}

									.list-text {
										margin: 0 20rpx 0 28rpx;
										width: 1000rpx;
										height: 100%;

										.list-name {
											margin: 10rpx 0 20rpx 0;

											p {
												font-family: '苹方';
												font-size: 18px;
												font-weight: 600;
												color: rgba(59, 59, 59, 1);
												text-overflow: ellipsis;
												overflow: hidden;
												word-break: break-all;
												white-space: nowrap;
											}
										}
									}

									.list-author {
										display: flex;
										align-items: center;

										text {
											font-size: 14px;
											color: rgba(168, 168, 168, 1);
										}

										.box {
											padding: 2rpx 10rpx;

											background-color: #fce2b2;
											font-size: 10px;
											// font-weight: 600;
											border-radius: 10rpx;
											color: rgba(119, 130, 138, 1);
											text-align: center;
											line-height: 28rpx;
											border: 1px solid #fd6143;
											margin-left: 20rpx;
											margin-top: 5rpx;
										}
									}

									.list-detail {
										margin: 20rpx 0 0;
										height: 100rpx;
										font-size: 15px;
										color: rgba(119, 130, 138, 1);
										overflow: hidden;

										text {
											display: -webkit-box;
											-webkit-line-clamp: 2;
											-webkit-box-orient: vertical;
											overflow: hidden;

										}
									}

								}

								.rank-txt {
									margin-left: 70rpx;

									text {
										font-size: 14px;
									}
								}
							}

						}

					}
				}
			}
		}
	}
</style>